const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const EslintWebpackPlugin = require("eslint-webpack-plugin");

module.exports = {
  entry: "./src/index.tsx",
  mode: "development",
  devServer: {
    host: "localhost",
    port: 2000,
    open: true,
    historyApiFallback: true // 前端路由刷新404跳转到index.html
  },
  devtool: "cheap-module-source-map", // 会告诉哪一行出错
  module: {
    rules: [
      {
        test: /\.(j|t)sx?$/,
        include: path.resolve(__dirname, "../src"), // 只处理src下的文件
        use: [
          {
            loader: "babel-loader",
            options: {
              cacheDirectory: true, // 开启babel缓存
              cacheCompression: false // 关闭缓存压缩
            }
          }
        ]
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "postcss-loader", "less-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "ReactWebpackTS",
      template: "./public/index.html"
    }),
    new ReactRefreshWebpackPlugin(), // react的HRM
    new EslintWebpackPlugin({
      context: "./src", // 指定文件目录
      exclude: "node_modules", // 默认值
      extensions: ["ts", "tsx"], // 检查的文件名，默认为js
      cache: true, // 开启eslint缓存
      cacheLocation: path.resolve(__dirname, "../node_modules/.cache/eslintcache") // 缓存目录
    })
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "../src")
    },
    extensions: [".tsx", ".ts", ".js"] // 自动补全文件扩展名
  }
};
